
md-content#riskInformation(
	ng-if="vm.riskData && vm.modelSettings"
	layout="column"
	tabindex="0"
	tdr-focus="true")

	// Title
	.riskItemContainer#riskTitleArea(
		layout="column"
		layout-align="start"
		flex
		ng-class="{issueTitleArea: vm.data}")

			div(layout="row", flex, layout-align="space-between")
				div(layout="row", flex)
					#riskRoleIndicator(ng-style="{backgroundColor: vm.riskData.roleColor}")

					div(ng-if="!vm.data"
						layout="column"
						flex)
						md-input-container#riskTitleInput(
							style="width=100%;"
							flex
							md-no-float)

							input(
								flex
								type="text"
								ng-model="vm.riskData.name"
								ng-change="vm.nameChange()"
								ng-disabled="vm.data"
								ng-focus="vm.textInputHasFocus(true)"
								ng-blur="vm.textInputHasFocus(false)"
								aria-label="Title"
								tdr-focus="true"
								required
								placeholder="Title",
								ng-click="vm.titleInputClick($event)")

					label#riskTitle(ng-if="vm.data") {{vm.riskData.name}}

	// Info
	.riskItemContainer#riskInfoArea(layout="row", layout-align="start center", flex="none")
		div(flex="10")
			md-icon.angular-material-icons#riskStatusIcon(
				style="color:{{vm.riskData.statusIcon.colour}}") {{vm.riskData.statusIcon.icon}}

		.riskRiskOwner(ng-if="vm.data", layout="row", layout-align="space-between", flex)
			label {{vm.data.owner}}
			label {{vm.data.created | prettyDate }}

	// Status
	.riskItemContainer#riskAdditional(layout="column")
		div(layout="row")
			md-input-container.riskItemStatus(flex)
				label SafetiBase ID
				textarea(
					id="riskSafetibaseId"
					ng-model="vm.riskData.safetibase_id"
					ng-disabled="!vm.canUpdateRisk()")
			
			md-input-container.riskItemStatus(flex)
				label Associated Activity
				textarea(
					id="riskActivity"
					ng-model="vm.riskData.associated_activity"
					ng-disabled="!vm.canUpdateRisk()")

	.riskItemContainer#riskDescriptionContainer(layout="column", layout-align="start", flex)
		div(layout="column", layout-align="start", flex)
			div(flex, layout="column")
				md-input-container#descriptionText()
					label Description
					textarea(
						ng-model="vm.riskData.desc"
						ng-focus="vm.textInputHasFocus(true)"
						ng-blur="vm.textInputHasFocus(false)"
						ng-disabled="!vm.canUpdateRisk()")

			.riskThumbnail(
				ng-if="vm.riskData.descriptionThumbnail"
				ng-click="vm.showScreenshot($event, vm.riskData.viewpoint)")
				img.riskThumbnailImage(ng-src="{{vm.riskData.descriptionThumbnail}}")


	.riskItemContainer#riskAdditional(layout="column")

		div(layout="row")
			md-input-container(flex)
				label Risk Owner
				md-select(
					id="riskOwner"
					ng-model="vm.riskData.assigned_roles[0]"
					ng-disabled="!vm.canUpdateRisk()")

					md-option(ng-repeat="job in vm.modelJobs", value="{{job}}") {{job}}

			md-input-container(flex)
				label Category
				md-select(
					id="riskCategory"
					ng-model="vm.riskData.category"
					ng-disabled="!vm.canUpdateRisk()")

					md-option(
						ng-repeat="category in vm.categories"
						value="{{category.value}}") {{category.label}}

		div(layout="row")
			md-input-container(flex)
				label Risk Likelihood
				md-select(
					id="riskLikelihood"
					ng-model="vm.riskData.likelihood"
					ng-change="vm.setLevelOfRisk()"
					ng-disabled="!vm.canUpdateRisk()")
					
					md-option(
						ng-repeat="likelihood in vm.likelihoods"
						value="{{likelihood.value}}") {{likelihood.label}}

			md-input-container(flex)
				label Risk Consequence
				md-select(
					id="riskConsequence"
					ng-model="vm.riskData.consequence"
					ng-change="vm.setLevelOfRisk()"
					ng-disabled="!vm.canUpdateRisk()")

					md-option(
						ng-repeat="consequence in vm.consequences"
						value="{{consequence.value}}") {{consequence.label}}

	.riskItemContainer#riskAdditional(layout="column")

		div(layout="row")
			md-input-container(flex)
				label Level of Risk
				md-select(
					id="riskLevelOfRisk"
					ng-model="vm.riskData.level_of_risk"
					ng-disabled="true")

					md-option(
						ng-repeat="level in vm.levels"
						value="{{level.value}}") {{level.label}}

			md-input-container(flex)
				label Mitigation Status
				md-select(
					id="riskMitigationStatus"
					ng-model="vm.riskData.mitigation_status"
					ng-disabled="!vm.canUpdateRisk()")

					md-option(
						ng-repeat="status in vm.statuses"
						value="{{status.value}}") {{status.label}}

		div(flex, layout="column")
			md-input-container#descriptionText()
				label Mitigation
				textarea(
					ng-model="vm.riskData.mitigation_desc"
					ng-focus="vm.textInputHasFocus(true)"
					ng-blur="vm.textInputHasFocus(false)"
					ng-disabled="!vm.canUpdateRisk()")

md-divider

.riskItemContainer#riskFooterButtons(layout="column")

	.riskThumbnail.fillHeight(
		layout="row"
		layout-align="center"
		ng-if="vm.commentThumbnail"
		ng-click="vm.showThumbnail()")

		img.riskThumbnailImage(
			id="commentThumbnail"
			ng-src="{{vm.commentThumbnail}}")

	div(layout="row" flex="100")
		div(layout="row" layout-align="start center")
			md-button.md-icon-button(

				ng-repeat="(action, actionData) in vm.actions"
				id="{{actionData.id + 'CommentButton'}}"
				aria-label="{{action}}"
				ng-click="vm.doAction($event, action)"
				ng-if="actionData.visible()"
				ng-disabled="actionData.disabled()")

				md-tooltip(md-direction="bottom") {{actionData.label}}
				md-icon.angular-material-icons(style="color:{{actionData.selected ? '#FF9800' : ''}}") {{actionData.icon}}

		div(flex="100")

		div(layout="row" layout-align="end center")
			md-button.md-fab.md-mini(
				id="submitCommentButton"
				aria-label="Submit"
				ng-disabled="!vm.canSubmitUpdateRisk() || vm.failedToLoad"
				ng-click="vm.submit()"
				ng-if="!vm.saving")
				md-tooltip(md-direction="bottom") Submit
				md-icon.angular-material-icons save
			md-progress-circular(md-diameter="20px", md-mode="indeterminate" ng-if="vm.saving")

// Whilst risk is loading
div.heightFix(
	ng-if="!vm.modelSettings || !vm.riskData"
	flex
	layout="column"
	layout-fill
	tabindex="0"
	tdr-focus="true")

	tdr-progress(info="vm.issueProgressInfo")

div.heightFix(
	ng-if="vm.failedToLoad"
	flex
	layout="column"
	layout-fill
	tabindex="0"
	tdr-focus="true")

	div(
		layout="column"
		flex 
		layout-align="center center")
			h3 Risk Failed to Load
